<template>
    <div>
        <x-form ref="xForm" v-model="formData" :config="formConfig">
            <template #executionListener>
                <el-badge :value="executionListenerLength">
                    <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
                </el-badge>
            </template>
        </x-form>
        <executionListenerDialog v-if="dialogName === 'executionListenerDialog'" :element="element" :modeler="modeler"
            @close="finishExecutionListener" />
    </div>
</template>

<script>
import mixinPanel from "../../common/mixinPanel";
import mixinExecutionListener from "../../common/mixinExecutionListener";
import { commonParse } from "../../common/parseElement";
export default {
    mixins: [mixinPanel, mixinExecutionListener],
    data() {
        return {
            formData: {},
        };
    },
    props: {
        state: {
            required: false,
        },
    },
    computed: {
        formConfig() {
            const _this = this;
            return {
                inline: false,
                item: [
                    {
                        xType: "input",
                        name: "id",
                        label: "节点 id",
                        rules: [{ required: true, message: "Id 不能为空" }],
                        // disabled: _this.state == "readonly",
                        disabled: true,
                    },
                    {
                        xType: "input",
                        name: "name",
                        label: "节点名称",
                        disabled: _this.state == "readonly",
                    },
                    {
                        xType: "input",
                        name: "documentation",
                        label: "节点描述",
                        disabled: _this.state == "readonly",
                    },
                    {
                        xType: "slot",
                        name: "executionListener",
                        label: "执行监听器",
                        disabled: _this.state == "readonly",
                        show: _this.state !== "readonly",
                    },
                    {
                        xType: "switch",
                        name: "async",
                        label: "异步",
                        activeText: "是",
                        inactiveText: "否",
                        disabled: _this.state == "readonly",
                    },
                ],
            };
        },
    },
    watch: {
        "formData.async": function (val) {
            if (val === "") val = null;
            this.updateProperties({ "flowable:async": val });
        },
    },
    created() {
        this.formData = commonParse(this.element);
    },
};
</script>

<style></style>
